<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <style>
        .el-card__header {
            background-color: #409EFF;
        }

    </style>



</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="30%" style="margin-top: 20px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>webSocket客户端测试工具</span>
                    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                </div>
                <div class="">

                    <el-form ref="form" :model="form" label-width="90px">
                        <el-form-item label="发送人名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>

                        <el-form-item label="消息内容">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align: right">
                            <span style="color: red">*发送人为空，视为群发</span>
                            <el-button type="primary" @click="clientOnSubmit">发送</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>

            <el-card class="box-card" style="margin-top: 50px">
                <div slot="header" class="clearfix">
                    <span>webSocket服务端测试工具</span>
                    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
                </div>
                <div class="">

                    <el-form ref="form" :model="form2" label-width="90px">
                        <el-form-item label="发送人名称">
                            <el-input v-model="form2.name"></el-input>
                        </el-form-item>

                        <el-form-item label="消息内容">
                            <el-input type="textarea" v-model="form2.desc"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align: right">
                            <span style="color: red">*发送人为空，视为群发</span>
                            <el-button type="primary" @click="serviceOnSubmit">发送</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>

        </el-aside>
        <el-main>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>实时监控</span>
                    <el-button  :type="lockType" style="margin-top: -9px;margin-right:30px;float: right;" @click="lockScreen"><span >锁屏</span></el-button>
                    <el-button  type="info" style="margin-top: -9px;margin-right:30px;float: right;" @click="clearLog"><span >清空</span></el-button>
                    <el-button  type="danger" style="margin-top: -9px;margin-right:30px;float: right;"  @click="closeWebSocketClick">关闭</el-button>
                    <el-button  :type="onOffType" style="margin-top: -9px;margin-right:30px;float: right;"  @click="openWebSocketClick">打开</el-button>
                </div>
                <div id="msgInfo" style="height: 50px;overflow:auto">

                </div>

                <el-table id="msgTable"
                        :data="tableData"
                        height="550px"
                        border

                        style="width: 100%">
                    <el-table-column
                            prop="socketType"
                            label="socket类型"
                            width="100"
                            :formatter="formatSocketType">
                    </el-table-column>
                    <el-table-column
                            prop="msgType"
                            label="消息类型"
                            width="100"
                            :formatter="formatMsgType">
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--prop="sendType"-->
                            <!--label="发送类型"-->
                            <!--width="100"-->
                            <!--:formatter="formatSendType">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="name"-->
                            <!--width="150"-->
                            <!--label="接受者/发送者">-->
                    <!--</el-table-column>-->
                    <el-table-column
                            prop="msg"
                            width="650"
                            label="消息内容">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            width="170"
                            label="时间">
                    </el-table-column>
                </el-table>


            </el-card>
        </el-main>
    </el-container>

</div>
</body>
<!-- 先引入 Vue -->
<script th:src="@{/static/js/vue.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<!-- 引入组件库 -->
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/web/index/index.js}"></script>
</html>